<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兔年大吉</title>
    <link rel="stylesheet" href="./css/base.css">
</head>

<body>
    <div id="app">
        <transition enter-active-class="bg-active" :appear="true">
            <div class="bg"></div>
        </transition>
        <div class="yanhua"></div>
        <transition enter-active-class="new-year-active" :appear="true">
            <div class="new-year">
                <img src="./assets/10006.gif" alt="" srcset="">
            </div>
        </transition>
        <transition enter-active-class="ci-active" :appear="true">
            <div class="ci">
                <div>丰色地面 祝您</div>
                <div>福兔贺岁<br>兔年吉祥<br>财源广进<br>新春大吉</div>
            </div>
        </transition>
        <div class="tuzi">
            <transition enter-active-class="new-year-active" :appear="true">
                <img class="tu" src="./assets/10003.png" alt="" srcset="">
            </transition>
            <div class="yun"></div>
            <!-- <img class="yun" src="./assets/10004.png" alt="" srcset=""> -->
        </div>
        <div class="play-box">
            <img class="play" :class=" { active:isPlay } " src="./assets/10007.svg" alt="" srcset=""
                @click="playOrStop()"
            >
        </div>
        <audio ref="audio" src="./assets/5fe5a3791d3d4.mp3" controls autoplay v-show="false"></audio>
    </div>
    <script src="./js/vue.global.prod.js"></script>
    <script>
        Vue.createApp({
            data () {
                return {
                    isPlay:true
                }
            },
            methods: {
                playOrStop(){
                    this.isPlay = !this.isPlay;
                    this.doPlay();
                },
                doPlay() {
                    if(this.isPlay){
                        this.$refs.audio.play()
                    }else{
                        this.$refs.audio.pause()
                    }
                }
            },
            mounted () {
                // this.doPlay();
            },
        }).mount("#app")
    </script>
</body>

</html>
